<style>
    body{
        background-color: cornsilk;
        width: 812px;
    }
    #table{
        height: 480px;
        padding: 16px 24px;
    }
    #title{
        height: 80px;
        display: flex;
    }
    #title #left{
        display: inline-block;
        height: 100%;
        width: 60%;
    }
    #title #left h2{
        margin-top: 0;
        margin-bottom: .75rem;
    }
    #title #left p{
        text-align: right;
        padding-right: 1.75rem;
    }
    #title #right{
        vertical-align: top;
        display: inline-block;
        height: 100%;
        width: 39%;
    }
    #team{ 
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        height: 390px;
        width: 752px;
    }
    .cell-applicant.right-border, .cell-optional.right-border{
        border-right: 1px solid gray;
    }
    .cell-applicant.bottom-border, .cell-optional.bottom-border{
        border-bottom: 1px solid gray;
    }
    .cell-applicant, .cell-optional{
        width: 150px;
        height: 75px;
        border-left: 1px solid gray;
        border-top: 1px solid gray;
    }
    .cell-applicant p:first-of-type{
        padding-left: 0.75rem;
        padding-top: 0.70rem;
        margin: 0;
        font-size: 16px;
    }
    .cell-applicant p:first-of-type span:last-of-type{
        padding-top: 0.06rem;
        padding-right: 0.45rem;
        float: right;
    }
    .cell-applicant p:first-of-type span:last-of-type img{
        width: 24px;
        height: 24px;
    }
    .cell-applicant p:nth-of-type(2){
        padding-left: 0.75rem;
        padding-top: 0.45rem;
        margin: 0;
        font-size: 14px;
    }
    .cell-optional p{
        padding-left: 0.32rem;
        padding-top: 0.2rem;
        margin:0;
    }
    .cell-optional p img{
        width: 20px;
        height: 20px;
        opacity: 0.2;
    }
</style>
<div id="table">
    <div id="title">
        <div id="left">
            <h2 id="name">({{ team_id }}){{ team_name }}<!-- 25人英雄范阳夜变 --></h2>
            <p><span style="font-weight: bold;">{{ time }}<!-- 2021-02-01 10:56:42 --></span></p>
        </div>
        <div id="right">
            {{ remarks }}<!-- 备注：这里写备注！！！ -->
        </div>  
    </div>
    <div id="team">
        <% for (var i = 0; i<cells.length; i++) { %>
            {{if cells[i].applicant.qq}}
            <div class="cell-applicant {{if i>19}} right-border {{/if}} {{if (i+1)%5==0}}bottom-border{{/if}}" style="background-color: {{ cells[i].color }}CC;">
                <p>
                    <span>{{if cells[i].applicant.id}}{{cells[i].applicant.id}}{{else}}&nbsp;{{/if}}</span>
                    <span>{{if cells[i].xf}}<img src="https://img.jx3box.com/image/xf/{{ cells[i].xf }}.png" alt="{{ cells[i].xf }}">{{/if}}</span>
                </p>
                <p>{{if cells[i].applicant.qq}}{{cells[i].applicant.qq}}{{else}}-{{/if}}</p>
            </div>
            {{else}}
            <div class="cell-optional {{if i>19}} right-border {{/if}} {{if (i+1)%5==0}}bottom-border{{/if}}">
                <p>
                    <% for(var j = 0; j < cells[i].xf_optional.length; j ++) { %>
                        {{if j < 18 && cells[i].xf_optional[j] != 10145 }}
                        <img src="https://img.jx3box.com/image/xf/{{ cells[i].xf_optional[j] }}.png" alt="{{ cells[i].xf_optional[j] }}">
                        {{/if}}
                    <% } %>
                </p>
            </div>
            {{/if}}
        <% } %>
    </div>
    <p style="color: gray; font-size: 14px; text-align: center; margin-top: 0;">团队排表功能由开源免费的QQ群机器人咕-bot提供, 发送 "<span style="color: red; font-weight: bold">团队报名 心法 id</span>" 即可报名</p>
</div>
